<template>
  <div 
    class="file-card" 
    :class="{ 'is-directory': file.type === 'directory', 'is-selected': isSelected }"
    @click="handleClick"
    @dblclick="$emit('dblclick', file)"
  >
    <!-- 文件图标 -->
    <div class="file-icon">
      <FileTypeIcon :fileType="file.type" :fileName="file.name" size="large" />
    </div>
    
    <!-- 文件名称 -->
    <div class="file-name">
      <el-tooltip 
        :content="file.name" 
        placement="top" 
        :show-after="500"
        :enterable="false"
        effect="dark"
      >
        <span>{{ file.name }}</span>
      </el-tooltip>
    </div>
    
    <!-- 文件信息和操作按钮容器 -->
    <div class="info-actions-container">
      <!-- 文件信息 (默认显示) -->
      <div class="file-info">
        <span class="file-size">{{ file.size || '-' }}</span>
        <span class="file-update-time">{{ formatDate(file.updateTime) }}</span>
      </div>
      
      <!-- 操作按钮 (hover时显示) -->
      <div class="file-actions">
        <template v-if="file.type !== 'directory'">
          <el-tooltip content="预览" placement="top" v-if="canPreview">
            <el-button 
              type="primary" 
              size="small" 
              circle 
              @click.stop="$emit('preview', file)"
            >
              <el-icon><View /></el-icon>
            </el-button>
          </el-tooltip>
          
          <el-tooltip content="在阅读器中打开" placement="top" v-if="canOpenInReader">
            <el-button 
              type="success" 
              size="small" 
              circle 
              @click.stop="$emit('open', file)"
            >
              <el-icon><Reading /></el-icon>
            </el-button>
          </el-tooltip>
          
          <el-tooltip :content="permissionStore.canDownload ? '下载' : permissionStore.downloadDisabledMessage" placement="top">
            <el-button 
              type="info" 
              size="small" 
              circle 
              @click.stop="handleDownload(file)"
              :disabled="!permissionStore.canDownload"
            >
              <el-icon><Download /></el-icon>
            </el-button>
          </el-tooltip>
        </template>
        
        <el-tooltip content="详情" placement="top">
          <el-button 
            type="warning" 
            size="small" 
            circle 
            @click.stop="$emit('info', file)"
          >
            <el-icon><InfoFilled /></el-icon>
          </el-button>
        </el-tooltip>
        
        <el-tooltip content="删除" placement="top" v-if="canDelete">
          <el-button 
            type="danger" 
            size="small" 
            circle 
            @click.stop="$emit('delete', file)"
          >
            <el-icon><Delete /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { ElMessage } from 'element-plus';
import { usePermissionStore } from '../../store';
import { 
  Download, Delete, InfoFilled, View, Reading
} from '@element-plus/icons-vue';
import FileTypeIcon from './FileTypeIcon.vue';

const props = defineProps({
  file: {
    type: Object,
    required: true
  },
  isSelected: {
    type: Boolean,
    default: false
  },
  canDelete: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['click', 'dblclick', 'preview', 'download', 'delete', 'info', 'open']);

// 处理点击事件
const handleClick = (event) => {
  // 阻止事件冒泡
  event.stopPropagation();
  // 发送点击事件
  emit('click', props.file);
};

// 获取权限store
const permissionStore = usePermissionStore();

// 处理下载按钮点击
const handleDownload = (file) => {
  if (permissionStore.canDownload) {
    emit('download', file);
  } else {
    ElMessage.warning(permissionStore.downloadDisabledMessage);
  }
};

// 是否可以预览
const canPreview = computed(() => {
  if (props.file.type === 'directory') return false;
  
  const previewableTypes = ['document', 'markdown', 'image', 'video', 'html', 'presentation', 'spreadsheet'];
  return previewableTypes.includes(props.file.type) || isPreviewableByExtension(props.file.name);
});

// 是否可以在阅读器中打开
const canOpenInReader = computed(() => {
  if (props.file.type === 'directory') return false;
  
  const openableTypes = ['document', 'markdown', 'html', 'presentation', 'spreadsheet', 'text'];
  return openableTypes.includes(props.file.type) || isOpenableByExtension(props.file.name);
});

// 根据扩展名判断是否可预览
const isPreviewableByExtension = (fileName) => {
  const extension = fileName.split('.').pop().toLowerCase();
  const previewableExtensions = [
    'pdf', 'docx', 'doc', 'md', 'markdown', 'jpg', 'jpeg', 'png', 'gif', 
    'mp4', 'webm', 'html', 'htm', 'ppt', 'pptx', 'xls', 'xlsx'
  ];
  return previewableExtensions.includes(extension);
};

// 根据扩展名判断是否可在阅读器中打开
const isOpenableByExtension = (fileName) => {
  const extension = fileName.split('.').pop().toLowerCase();
  const openableExtensions = [
    'pdf', 'docx', 'doc', 'md', 'markdown', 'html', 'htm', 
    'txt', 'json', 'xml', 'ppt', 'pptx', 'xls', 'xlsx'
  ];
  return openableExtensions.includes(extension);
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-';
  
  // 如果是日期对象，转换为字符串
  if (dateStr instanceof Date) {
    return dateStr.toLocaleDateString();
  }
  
  // 如果已经是短格式，直接返回
  if (dateStr.length < 12) return dateStr;
  
  // 尝试解析日期
  try {
    const date = new Date(dateStr);
    return date.toLocaleDateString();
  } catch (e) {
    return dateStr;
  }
};
</script>

<style scoped>
.file-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  background-color: white;
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 200px;
  box-sizing: border-box;
}

.file-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.file-card.is-selected {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.file-card.is-directory {
  background-color: #f8fafc;
}

.file-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  margin-bottom: 12px;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
}

/* 文件信息和操作按钮容器 */
.info-actions-container {
  position: relative;
  height: 40px;
  margin-top: auto;
  overflow: hidden;
}

/* 文件信息样式 */
.file-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  align-items: center;
  height: 100%;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* 操作按钮样式 */
.file-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  height: 100%;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Hover效果 */
.file-card:hover .file-info {
  opacity: 0;
}

.file-card:hover .file-actions {
  opacity: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .file-card {
    height: 180px;
  }
  
  .file-icon {
    height: 80px;
  }
}
</style> 